<!-- 挂号列表 -->
<script lang="ts" setup>
import { onMounted, ref,reactive } from 'vue';
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton, ElTable, ElTableColumn } from 'element-plus';
import http from '@/http'
import { formatDate } from '@/utils/dateFormatter';//引入全局日期格式化工具
import { ElMessage, ElMessageBox } from 'element-plus'
// 分页
import type { ComponentSize,TableInstance } from 'element-plus'
//退费的确认消息框
const open = (name) => {
  ElMessageBox.confirm(
    `您是否对 ${name} 进行退费操作？`,
    '退费操作',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '退费操作完成',
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '退费操作取消',
      });
    });
};
    const appointmentData = ref([]); // 假设这是从后端获取的数据

    // 格式化挂号费用，添加货币符号
    const formatFee = (row, column, cellValue) => {
      return `¥${cellValue}`;
    };

    // 处理查询操作
    const handleSearch = () => {
      //调用分页查询
      pageInfo();
    };

    // 处理重置操作
    const handleReset = () => {
      filterForm.value = {
        patientName: '',
        department: '',
      };
      // 如果需要，也可以重置表格数据（但通常不需要，因为数据来自后端）
      // appointmentData.value = []; // 如果需要，可以取消注释这行代码来重置数据
    };

    // 处理退费操作
    const handleRefund = (id,patientName) => {
      // 这里应该添加退费逻辑，例如发送请求到后端
      console.log('退费操作', id);
      //弹出确认进行退费操作
      open(patientName);
      
      
    };


//挂号类型下拉框选中值
const value1 = ref([])

//下拉框默认值
const options1 = ref([
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  }
])
//挂号时段下拉框选中值
const value2 = ref([])

//下拉框默认值
const options2 = ref([
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  }
])
// //所属部门下拉框选中值
let value3 = ref([])

// //下拉框默认值
// const options3 = ref([
//   {
//     value: 'Option1',
//     label: 'Option1',
//   },
//   {
//     value: 'Option2',
//     label: 'Option2',
//   }
// ])
//所属部门下拉框选中值
const value5 = ref([])

//下拉框默认值
const options4 = ref([
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  }
])
//时间控件
const date2 = ref(null)
// 默认时间
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)
//
const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  }
]
//挂载完之后渲染页面
onMounted(()=>{
  //分页查询
  pageInfo();
//获取科室
getdept();
  // 获取挂号时段字典（假设字典类型为his_subsection_type）
  fetchDictData("his_subsection_type");
  fetchDictData2("his_scheduling_type");
  REgisteredstatus("his_registration_status");
})
//患者名称
let patientName=ref('')
//分页查询方法
function pageInfo(){
  if(date2.value==null){
    date2.value=null;
  }else{
     date2.value=formatDate(date2.value,'YYYY-MM-DD' );
  }
 
http.get("/registration/list",{params:{
  deptId:value5.value,
  patientName:patientName.value,
  schedulingType:value4.value,
  subsectionType:value3.value,
  regStatus:value6.value,
  visitDate:date2.value,
  pageNum:pageNum.value,
  pageSize:pageSize.value
}}).then((res)=>{
  total.value=res.total
  appointmentData.value=res.list
}).catch((res)=>{

})
}
//当前页
let pageNum=ref(1)
//每页条数
let pageSize=ref(10);
//查询所有部门
function getdept() {
  //发送http请求，获取科室信息
  http.get("/dept/getdept").then((res) => {
    options2.value = res
  }).catch((res) => {
    console.log("失败")
  })
}
//查询字典数据表的条件

// 获取时段类型字典
let timePeriod = ref([])
const fetchDictData = async (dictType) => {
  await http.get('/api/dict/data/' + dictType).then((res) => {
    timePeriod.value = res;
  }).catch((error) => {
    console.error('获取字典数据失败:', error);
  })
};
//类型
let value4=ref('')
let subsectionType=ref([])
const fetchDictData2 = async (dictType) => {
  await http.get('/api/dict/data/' + dictType).then((res) => {
    subsectionType.value = res;
  }).catch((error) => {
    console.error('获取字典数据失败:', error);
  })
};
// 获取状态his_registration_status
//类型
let value6=ref('')
let RegistrationStatus=ref([])
const REgisteredstatus = async (dictType) => {
  await http.get('/api/dict/data/' + dictType).then((res) => {
    RegistrationStatus.value = res;
  }).catch((error) => {
    console.error('获取字典数据失败:', error);
  })
};
const background = ref(false)
const disabled = ref(false)
const size = ref<ComponentSize>('default')
//分页页码
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  pageNum.value=val
  pageInfo();
}
//每页条数
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  pageSize.value=val
  pageInfo();
}
const total=ref()
const open5=(()=>{
  ElMessage({
    message: '正在收费中...',
    type: 'success',
  })
})
const open3 = () => {
  ElMessage({
    message: '收费失败!',
    type: 'warning',
  })
}
//修改排班消息
function setStatus(row,status){
  //发送http请求，修改他的状态
  http.get("/registration/setStatus",{params:{
    redId:row,
    status:status
  }}) 
  .then((res)=>{
    if(res){
      open5();
    }else{
      open3();
    }
  }).finally(()=>{
    //调用表格查询
    pageInfo();
  })
}
</script>
<template>
  <div class="appointment-list-page">
    <el-form :inline="true" :model="filterForm" class="demo-form-inline">
      <el-form-item label="所属部门">
        <el-select
      v-model="value5"
      placeholder="Select"
      size="large"
      style="width: 240px"
      clearable
    >
      <el-option
        v-for="item in options2"
        :key="item.deptId"
        :label="item.deptName"
        :value="item.deptId"
      />
    </el-select>
      </el-form-item>
      <el-form-item label="患者名称">
        <el-input  placeholder="请输入患者名称" v-model="patientName"></el-input>
      </el-form-item>
     
      <el-form-item label="挂号类型">
        <el-select
      v-model="value4"
      placeholder="Select"
      size="large"
      style="width: 240px"
      clearable
    >
      <el-option
        v-for="item in subsectionType"
        :key="item.dict_value"
        :label="item.dict_label"
        :value="item.dict_value"
      />
    </el-select>
      </el-form-item>
      <el-form-item label="挂号时段">
        <el-select
      v-model="value3"
      placeholder="Select"
      size="large"
      style="width: 240px"
      clearable
    >
      <el-option
        v-for="item in timePeriod"
        :key="item.dict_value"
        :label="item.dict_label"
        :value="item.dict_value"
      />
    </el-select>
      </el-form-item>
      <el-form-item label="挂号状态">
        <el-select
        clearable
      v-model="value6"
      placeholder="Select"
      size="large"
      style="width: 240px"
    >
      <el-option
        v-for="item in RegistrationStatus"
        :key="item.dict_value"
        :label="item.dict_label"
        :value="item.dict_value"
      />
    </el-select>
      </el-form-item>
      <el-form-item label="挂号时间">
        <div class="block">
      <el-date-picker
        v-model="date2"
        type="datetime"
        placeholder="Select date and time"
        :shortcuts="shortcuts"
      />
    </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- //表格 -->
    <el-table
      :data="appointmentData"
      style="width: 100%; margin-bottom: 20px"
      row-key="regId"
      border
      lazy
     
    >
      <el-table-column type="expand">
        <template  #default="scope">
           挂号ID：<span style="color: red;">{{ scope.row.regId }}</span>
             挂号员：<span style="color: red;">{{ scope.row.doctorName }}</span>
             创建时间：<span style="color: red;">
             {{formatDate( scope.row.createTime,'YYYY/M/DD/ HH:mm:ss' )}}</span>
        </template>
       
      </el-table-column>
      <el-table-column prop="patientName" label="患者名称" width="120">

      </el-table-column>
      <el-table-column prop="deptName" label="挂号科室" width="120"></el-table-column>
      <el-table-column prop="doctorName" label="就诊医生" width="120"></el-table-column>
      <el-table-column prop="regItemAmount" label="挂号费用" width="100" :formatter="formatFee"></el-table-column>
      <el-table-column prop="regStatus" label="状态" width="100"></el-table-column>
      <el-table-column prop="visitDate" label="就诊日期" width="180"></el-table-column>
      <el-table-column prop="remark" label="挂号类型" width="120"></el-table-column>
      <el-table-column prop="remarkTwo" label="挂号时段" width="120"></el-table-column>
      <el-table-column label="操作" width="200px">
        <template #default="scope">
          <div v-if="parseInt(scope.row.regStatus)==1 ">
          <el-button type="danger" :icon="'Close'" @click="setStatus(scope.row.regId,'4')">退费</el-button>
          </div>
          <div v-if="parseInt(scope.row.regStatus)==0">
          <el-button type="success" :icon="'Select'" @click="setStatus(scope.row.regId,'1')">收费</el-button>
        </div>
        <div v-if="parseInt(scope.row.regStatus)==2">
         救诊中....
        </div>
        <div v-if="parseInt(scope.row.regStatus)==3">
         救诊完成
        </div>
        <div v-if="parseInt(scope.row.regStatus)==5">
          作废
        </div>
        <div v-if="parseInt(scope.row.regStatus)==4">
          已退费
        </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10,20,50]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" 
      />
    </div>
    </div>
</template>



<style scoped>
.appointment-list-page {
  padding: 20px;
}
.demo-form-inline {
  margin-bottom: 20px;
}
</style>